<template>
	<view class="">
		<app-search-for :value="value"></app-search-for>
		<!-- 导航1 -->
		<!-- 176-20 -->
		<app-navigation-icon v-if="pageList[157].subnav.length > 0" navHeight="156" navMargin="20rpx auto"
			iconRadius="50%" :navs="pageList[157].subnav" background="#f7f7f7"
			@btclick="btclick(pageList[157].subnav,pageList[157].params.content)" :scroll="true" columns="5" :rows="2">
		</app-navigation-icon>

		<!-- 导航2 -->
		<!-- 176-28 -->
		<app-navigation-icon @btclick="btclick(pageList[158].subnav,pageList[157].params.content)"
			v-if="pageList[158].subnav.length > 0" navHeight="148" navMargin="20rpx auto" :navs="pageList[158].subnav"
			background="#f7f7f7" :scroll="true" :columns="5" :rows="1">
		</app-navigation-icon>
		<!-- 成为双熙堂合伙人 -->
		<view class='partner' v-if="pageList[159]" @click="jump(pageList[159].url,pageList[157].params.content)">
			<image :src="pageList[159].icon_url" class="image" />
		</view>
		<!-- 成为合伙人 -->
		<view class="bepartner" v-if="pageList[160].subnav.length > 0">
			<view class="bepartnerone" v-for="(i,idx) in pageList[160].subnav" :key="idx"
				@click="jump(i.url,pageList[157].params.content)">
				<view class="image">
					<image class="img" :src="i.icon_url">
					</image>
				</view>
				<view class="title u-line-1">
					{{i.name}}
				</view>
			</view>
		</view>
		<!-- <view class="bepartner">
			<view class="bepartnerone" @click="jump('')">
				<view class="image">
					<image class="img"
						src="https://ceshi.senmainet.com/web/uploads/mall1/20210426/d140db35f691050c7cacbf045c6590fb.png">
					</image>
				</view>
				<view class="title u-line-1">
					成为主题圈主好处
				</view>
			</view>
			<view class="bepartnerone" @click="jump('/pages/user-center/user-center')">
				<view class="image">
					<image class="img"
						src="https://ceshi.senmainet.com/web/uploads/mall1/20210426/d140db35f691050c7cacbf045c6590fb.png">
					</image>
				</view>
				<view class="title">
					挣钱养家
				</view>
			</view>
		</view> -->
		<!-- 今日推荐 -->
		<view class="guess" @click="jump(pageList[163].url,pageList[157].params.content)">
			<image class="image" :src="pageList[163].icon_url" mode=""></image>
		</view>
		<!-- 成为合伙人 -->
		<view class="bepartner" v-if="pageList[164].subnav.length > 0">
			<view class="bepartnerone" v-for="(i,idx) in pageList[164].subnav" :key="idx"
				@click="jump(i.url,pageList[157].params.content)">
				<view class="image">
					<image class="img" :src="i.icon_url">
					</image>
				</view>
				<view class="title u-line-1">
					{{i.name}}
				</view>
			</view>
		</view>
		<!-- 主题循环 -->
		<view class="beloop" :style="{height:beHeight+'rpx'}" v-if="morelist.length > 0">
			<view class="belooprow" :style="item.style" v-for="(item,index) in morelist" :key="index"
				@click="jump(item.url,pageList[157].params.content)" v-if="item.length != 0">
				<view class="image">
					<image class="img" :src="item.icon_url"></image>
				</view>
				<view class="title u-line-1">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="nozt" v-else>
			暂无主题
		</view>
		<view class="" style="height: 32rpx;margin-top: 32rpx;"></view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
	import appNavigationIcon from '../../../components/page-component/app-navigation-icon/app-navigation-icon.vue';

	export default {
		name: 'index',
		components: {
			appSearchFor,
			appNavigationIcon
		},

		data() {
			return {
				value: {
					background: `#f7f7f7`,
					color: '#f7f7f7',
					placeholder: '搜索',
					radius: 28,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				pageList: [],
				boxHeight: [],
				beHeight: '',
				morelist: [],
				page: 1,
				limit: 20,
				page_count: 1,
				appmsg: ''
			}
		},
		watch: {
			morelist: function(newVal, oldVal) {
				// console.log(newVal,66666,oldVal,7777777);
				if (newVal != oldVal) {
					let mark = oldVal.length;
					let len = this.morelist.length;
					let style = '';
					this.$nextTick(async function() {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						await new Promise((resolve, reject) => {
							query.selectAll('.beloop .belooprow').fields({
								size: true
							}, data => {
								dataArray = data;
								resolve()
							}).exec();
						})
						for (let i = mark; i < len; i++) {
							if (i < 2) {
								if (i == 0) {
									style = `top: 0; left: 16rpx;`
								} else {
									style = `top: 0; left: 382rpx;`
								}
								this.boxHeight.push(dataArray[i].height)
								if (this.boxHeight[0] < this.boxHeight[1]) {
									this.beHeight = this.boxHeight[1] * 2
								} else {
									this.beHeight = this.boxHeight[0] * 2
								}
							} else {
								let minHeight = this.boxHeight[0];
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 382rpx;`
									this.beHeight = this.boxHeight[1] * 2 + 32 * Math.floor(i / 2)
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 16rpx;`
									this.beHeight = this.boxHeight[0] * 2 + 32 * Math.floor(i / 2)
								}
							}
							this.$set(newVal[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			}
		},
		onLoad() {
			this.navsReq()
			this.allReq(167)
			this.apptitle()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++;
				this.allReq(167)
			} else {
				// this.page = 1
				let collegeLoop = this.$storage.getStorageSync('circleLoop');
				if (collegeLoop) {
					this.morelist = this.morelist.concat(collegeLoop)
				} else {
					this.allReq(167)
				}
			}
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '主题圈子',
				path: '/pages/port/university/university',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '主题圈子',
				query: {

				}
			});
		},
		methods: {
			apptitle() {
				this.$request({
					url: this.$api.article.detail,
					data: {
						article_id: 2
					}
				}).then(res => {
					this.appmsg = res.data.article.title
				})
			},
			btclick(item) {
				uni.showModal({
					content: this.appmsg || 'APP暂未上线，敬请期待...',
					showCancel: false,
					confirmText: '我知道了'
				})
			},
			jump(item) {
				if (item == 'javascript:;' || item == '/') {
					uni.showModal({
						content: this.appmsg || 'APP暂未上线，敬请期待...',
						showCancel: false,
						confirmText: '我知道了'
					})
					return;
				}
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item ==
					'/pages/sixty/index' ||
					item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return;
				}
				uni.navigateTo({
					url: item
				})
			},
			navsReq() {
				this.$showLoading();
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: 94
					}
				}).then((res) => {
					this.$hideLoading();
					if (res.code === 0) {
						this.pageList = res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {
					this.$hideLoading();
				})
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						page: this.page,
						limit: this.limit,
						status: 1
					}
				}).then((res) => {
					if (pid == 167) {
						this.page_count = res.data.pagination.page_count;
						if (this.page == 1) {
							this.morelist = res.data.list
						} else {
							this.morelist = this.morelist.concat(res.data.list)
						}
						this.$storage.setStorageSync('circleLoop', this.morelist)
					}
				}).catch(() => {

				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7f7;
	}

	// 猜你喜欢
	.guess {
		width: 686rpx;
		margin: 32rpx;
		height: 398rpx;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 20rpx;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	/* 成为双熙堂合伙人 */
	.partner {
		width: 686rpx;
		margin: 20rpx auto;
		background: linear-gradient(180deg, #EDD5D5 0%, #C8C8C8 100%);
		border-radius: 32rpx;
		height: 192rpx;
		overflow: hidden;
	}

	.partner-url {
		width: 100%;
		height: 100%;
	}

	.partner .image {
		width: 100%;
		height: 100%;
	}

	/* 成为合伙人，APP端口 */
	.bepartner {
		width: 686rpx;
		margin: 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.bepartnerone {
		width: 328rpx;
		height: 422rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		&:nth-child(n+3) {
			margin-top: 32rpx;
		}

		.image {
			width: 328rpx;
			height: 350rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			height: 72rpx;
			line-height: 36rpx;
			padding: 10rpx 16rpx;
			color: rgba($color: #000000, $alpha: 0.84);
			font-size: 24rpx;
		}
	}

	.beloop {
		// width: 686rpx;
		margin: 32rpx auto;
		position: relative;
		/* display: flex;
		flex-wrap: wrap;
		justify-content: space-between; */
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		width: 350rpx;
		// height: 422rpx;
		// position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		&:nth-child(n+3) {
			margin-top: 32rpx;
		}

		.image {
			width: 100%;
			height: 470rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			height: 72rpx;
			line-height: 36rpx;
			padding: 10rpx 16rpx;
			color: rgba($color: #000000, $alpha: 0.84);
			font-size: 24rpx;
			font-weight: 700;
		}
	}

	.nozt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	}
</style>
